<template>
  <el-row :gutter="10" style="height:100%">
    <el-col :span="7" style="height:100%">
      <div style="display: flex;flex-direction: column;height: 100%;">

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" @click="menuClick('safeScore')">载体得分月度表</div>
            <div class="menu_group_wrapper">
              <!-- <div class="home_score_square">
                <div>
                  <div class="home_score_square_name">资产方</div>
                  <div class="home_score_square_score">47</div>
                </div>
              </div> -->

              <div style="display: flex;flex-direction: column;flex: 1;height: 100%;position: relative;">
                <div class="menu_group_wrapper_1" ref="carrierScoreCharts1" style="height: 100%;">
                </div>
                <div style="" class="score_point_title">
                  资产方</div>
              </div>

              <div style="display: flex;flex-direction: column;flex: 1;height: 100%;position: relative;">
                <div class="menu_group_wrapper_1" ref="carrierScoreCharts2" style="height: 100%;">
                </div>
                <div class="score_point_title">
                  载体</div>
              </div>

              <div style="display: flex;flex-direction: column;flex: 1;height: 100%;position: relative;">
                <div class="menu_group_wrapper_1" ref="carrierScoreCharts3" style="height: 100%;">
                </div>
                <div class="score_point_title">
                  企业</div>
              </div>

              <!-- <div class="home_score_square">
                <div>
                  <div class="home_score_square_name">企业</div>
                  <div class="home_score_square_score">68</div>
                </div>
              </div> -->
            </div>
          </div>
        </div>

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" @click="menuClick('yearTarget')">重点安全管理事项</div>
            <div style="margin-left:60px;height: 100%;">
              <div class="menu_group_wrapper" ref="eventPieCharts">

              </div>
            </div>
          </div>
        </div>

        <div style=" flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" @click="menuClick('carryEvent')">安全事故案例</div>
            <div
              style="display: flex;flex-direction: column;align-items: center;justify-content: center;padding-left: 15px;margin-top: 15px;margin-bottom: 30px;align-items: start;flex: 1;box-sizing: border-box;">
              <div style="flex:1;display: flex;flex-direction: column;justify-content: center;">
                <div class="sum_event_title">载体安全事故 </div>
                <div v-for="item,index in carrierEventList" @click="menuClick('carryEvent')" :key="item.title"
                  class="home_event_item">
                  {{(index+1)+'.'}}{{ item.title }} </div>
              </div>
              <div style="flex:1;display: flex;flex-direction: column;justify-content: center;">
                <div class="sum_event_title">典型安全事故 </div>

                <div v-for="item,index in typedEventList" @click="menuClick('hisEvent')" :key="
                  item.title" class="home_event_item">
                  {{(index+1)+'.'}}{{ item.title }}
                </div>
              </div>

            </div>
          </div>
        </div>

        <!-- <div style="flex: 1;overflow-y: hidden;padding-top: 10px;">
            <dv-border-box-10>
              <div class="menu_group_wrapper">
                <el-row :gutter="10" class="menu_row">
                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="企业异常事件一览" />
                  </el-col>
                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="历史事故回头看" />
                  </el-col>

                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="....." />
                  </el-col>
                  <el-col :span="12" class="menu_col">
                    <HomeMenu title="....." />
                  </el-col>

                </el-row>
              </div>
            </dv-border-box-10>
          </div> -->

      </div>
    </el-col>
    <el-col :span="10" style="height:100%;">
      <div style="margin: 0px 10px ;display: flex;flex-direction: column;height: 100%;
        justify-content: center;">
        <!-- <dv-charts :option="option1" style="height: 400px;" />
    <dv-charts :option="option1" style="height: 400px;" /> -->
        <div style="flex: 1;margin-top: 0px;">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" style="cursor:auto;text-align:center;margin-top: 6%;margin-left: 0;">载体月度得分表</div>
            <div style="flex: 1;" ref="echarts1"> </div>
          </div>

        </div>

        <div style="flex: 1;margin-top: 10px;position: relative;">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" style="cursor:auto;text-align:center;margin-top: 5px;margin-left: 0;">
              各承租企业得分表</div>
            <div style="flex: 1;" ref="echarts2"> </div>
          </div>
          <el-select v-model="zoneName" placeholder="请选择" size="mini" multiple collapse-tags
            style="position: absolute;top: 40px;right: 60px;width: 150px;" @change="onZoneChanged">
            <el-option v-for="item in zoneList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

        </div>

      </div>
    </el-col>
    <el-col :span="7" style="height:100%">
      <div style="display: flex;flex-direction: column;height: 100%;">

        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">

          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" @click="menuClick('newCompSafe')">载体安全生命周期管理</div>
            <div class="menu_group_wrapper" ref="companyStatCharts">

            </div>
          </div>
        </div>

        <div style="flex: 1;overflow-y: hidden;position: relative;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" @click="menuClick('emergencyPlan')">应急救援</div>
            <!-- <div class="menu_group_wrapper" ref="orgTreeCharts" style="height: 85%;">
            </div> -->
            <highcharts :options="orgchartOptions" style="flex: 1;padding: 7px 20px;"></highcharts>

          </div>

        </div>
        <div style="flex: 1;overflow-y: hidden;" class="menu_group_layout">
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div class="boder-title" @click="menuClick('knowShare')">安全知识园地</div>
            <div style="display: flex;flex-direction: column;flex: 1;padding: 30px 20px;">
              <div class="know_item_wrapper" @click="menuClick('knowShare')">
                <div class="know_item_name">安全知识:</div>
                <div class="know_item_count">
                  {{ safe_know_count }}
                </div>
              </div>

              <div class="know_item_wrapper" @click="menuClick('safeRule')">
                <div class="know_item_name">安全法规:</div>
                <div class="know_item_count">
                  {{ safe_rule_count }}
                </div>
              </div>

              <div class="know_item_wrapper" @click="menuClick('standardProfile')">
                <div class="know_item_name">安全标准:</div>
                <div class="know_item_count">
                  {{ safe_standard_count }}
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>
    </el-col>

  </el-row>
</template>

<script>
  import Bus from '@/common/bus'

  import HomeMenu from '@/components/HomeMenu';
  import barOption1 from './chart/bar1';
  import barOption2 from './chart/bar2';
  import barOption3 from './chart/bar3';
  import orgOption from './chart/org1';
  import { getCurrUser } from '@/common/constants';
  import { Chart } from 'highcharts-vue';
  import Highcharts from 'highcharts'; //必须引入
  import organizationInit from 'highcharts/modules/organization';
  import HighchartsSankey from 'highcharts/modules/sankey';

  import compStatBarOption from './chart/compNewBar';
  import carrierScoreOption1 from './chart/carrierScorePie1';
  import carrierScoreOption2 from './chart/carrierScorePie2';
  import carrierScoreOption3 from './chart/carrierScorePie3';
  import eventPieOption from './chart/eventPie';
  import { queryCarryScoreList } from '@/service/carryScore';
  import { queryLetSignList } from '@/service/letSign';
  import { queryCompLifeList } from '@/service/compLife';
  import { queryCarryEventList } from '@/service/carryEvent';
  import { queryTypedEventList } from '@/service/typedEvent';
  import { queryHighCarryContacts } from '@/service/carryContact';
  import { queryCompScoreList } from '@/service/compScore';



  import { queryKnowShareList } from '@/service/knowShare';
  import { querySafeRuleList } from '@/service/safeRule';
  import { querySafeStandList } from '@/service/safeStand';

  HighchartsSankey(Highcharts);
  organizationInit(Highcharts);

  export default {
    components: {
      HomeMenu,
      highcharts: Chart,
    },
    data() {
      return {
        user: {},
        zoneName: ['1#地块'],
        orgchartOptions: {
          chart: {
            inverted: true,
            backgroundColor: 'rgba(0,0,0,0)',
          },

          title: {
            text: '',
          },
          accessibility: {
            point: {
              descriptionFormat:
                '{add index 1}. {toNode.name}' +
                '{#if (ne toNode.name toNode.id)}, {toNode.id}{/if}, ' +
                'reports to {fromNode.id}',
            },
          },
          credits: {
            enabled: false,
          },
          series: [
            {
              name: '',
              type: 'organization',
              keys: ['from', 'to'],
              data: [
                ['叶晓华', '吴杰'],
                ['叶晓华', '吴文彪'],
                ['叶晓华', '陆静波'],
                ['叶晓华', '钱宗明'],
                ['叶晓华', '范丽亚'],
              ],
              levels: [
                {
                  level: 0,
                  color: '#b2540e',
                  dataLabels: {
                    color: 'white',
                    style: {
                      color: 'white',
                      fontSize: '11px',
                      textOutline: 'none',
                    },
                  },
                  // height: 25,
                },
                {
                  level: 1,
                  color: '#0070c0',
                  dataLabels: {
                    color: 'white',
                    style: {
                      color: 'white',
                      fontSize: '11px',
                      textOutline: 'none',
                    },
                  },
                  // height: 25,
                },
                {
                  level: 2,
                  color: '#00b050',
                  fontSize: '13px',

                  dataLabels: {
                    color: 'white',
                    style: {
                      color: 'white',
                      fontSize: '11px',
                      textOutline: 'none',
                    },
                  },
                },
                {
                  level: 3,
                  color: '#00b0f0',
                  dataLabels: {
                    color: 'white',
                    style: {
                      color: 'white',
                      fontSize: '11px',
                      textOutline: 'none',
                    },
                  },
                },
                {
                  level: 4,
                  color: '#f4aa72',
                  dataLabels: {
                    color: 'white',
                    style: {
                      color: 'white',
                      fontSize: '11px',
                      textOutline: 'none',
                    },
                  },
                },
              ],
              nodes: [
                // {
                //   id: 'Shareholders',
                // },
                // {
                //   id: 'Board',
                // },
                // {
                //   id: 'CEO',
                //   title: 'CEO',
                //   name: 'Atle Sivertsen',
                // },
                // {
                //   id: '吴杰',
                //   title: '吴杰',
                //   offset: '55%',
                //   column: 1,
                //   name: 'Christer Vasseng',
                // },
                // {
                //   id: '吴文彪',
                //   title: '吴文彪',
                //   name: 'Anne Jorunn Fjærestad',
                //   color: '#007ad0',
                //   column: 2,
                // },
                // {
                //   id: '陆静波',
                //   title: '陆静波',
                //   name: 'Torstein Hønsi',
                //   column: 2,
                // },
                // {
                //   id: '钱宗明',
                //   title: '钱宗明',
                //   name: 'Anita Nesse',
                //   column: 2,
                // },
                // {
                //   id: '范丽亚',
                //   name: '范丽亚',
                //   column: 2,
                // },
              ],
              colorByPoint: false,
              color: '#007ad0',
              dataLabels: {
                color: 'white',
              },
              borderColor: 'white',
              nodeWidth: 60,
            },
          ],
          tooltip: {
            outside: true,
          },
          exporting: {
            allowHTML: true,
            sourceWidth: 800,
            sourceHeight: 600,
          },
        },
        zoneList: [
          { label: '1#地块', value: '1#地块' },
          { label: '2#地块', value: '2#地块' },
          { label: '3#地块', value: '3#地块' },
          { label: '4#地块', value: '4#地块' },
          { label: '5#地块', value: '5#地块' },
          { label: '6#地块', value: '6#地块' },
          { label: '7#地块', value: '7#地块' },
        ],
        orgList: null,
        menuList: [],
        menu_col_height: 60,
        carrierEventList: [
          {
            title: '苏州工业园区闵航新型建材有限公司“9.10”坍塌较大事故...',
            link1: 'baidu.com',
          },
          {
            title: '苏州工业园区科技发展有限公司“10·13”火灾事故...',
            link1: 'baidu.com',
          },
        ],
        typedEventList: [
          {
            title: '张家港富瑞重型装备有限公司“1.29”中毒和窒息事故...',
            link1: 'baidu.com',
          },
          {
            title: '吴江区黎里文旅项目“12.6”房屋坍塌事故...',
            link1: 'baidu.com',
          },
        ],
        safe_know_count: 0,
        safe_standard_count: 0,
        safe_rule_count: 0,
      };
    },

    mounted() {
      let year = sessionStorage.getItem('year')
      this.user = getCurrUser();
      this.initCharts();
      this.loadScoreBar();
      this.loadCarrLineCharts();
      this.loadSafeEventCharts();
      this.loadCarrScorePie();
      this.loadCompLifeCharts();
      this.loadOrgList();
      this.loadCarryEvent();
      this.loadTypedEvent();
      this.loadSafeKnowCount();
      this.loadSafeRuleCount();
      this.loadSafeStandardCount();
      Bus.$on('onYearChange', () => {
        let year = sessionStorage.getItem('year')
        this.loadScoreBar();
        this.loadCarrLineCharts();
        this.loadSafeEventCharts();
        this.loadCarrScorePie();
        this.loadCarryEvent();
        this.loadTypedEvent();
			})
    },
    methods: {
      initCharts() {
        this.myChart = this.$echarts.init(this.$refs.echarts1);
        this.myChart1 = this.$echarts.init(this.$refs.echarts2);

        this.eventPieCharts = this.$echarts.init(this.$refs.eventPieCharts);
        this.carrierScoreCharts1 = this.$echarts.init(
          this.$refs.carrierScoreCharts1
        );
        this.carrierScoreCharts2 = this.$echarts.init(
          this.$refs.carrierScoreCharts2
        );
        this.carrierScoreCharts3 = this.$echarts.init(
          this.$refs.carrierScoreCharts3
        );

        this.companyStatCharts = this.$echarts.init(this.$refs.companyStatCharts);
        // this.orgTreeCharts = this.$echarts.init(this.$refs.orgTreeCharts);

        window.onresize = function () {
          //自适应大小
          console.log('onresize');
          this.myChart.resize();
          this.myChart1.resize();
          // this.orgTreeCharts.resize();
          this.companyStatCharts.resize();
          this.eventPieCharts.resize();
          this.carrierScoreCharts1.resize();
          this.carrierScoreCharts2.resize();
          this.carrierScoreCharts3.resize();
        };
      },
      async loadSafeKnowCount() {
        // const data = await queryKnowShareList({ isAudit: 'Y' });
        const data = await queryKnowShareList({});

        if (data.success) {
          this.safe_know_count = data.dataList.length;
        } else {
          this.safe_standard_count = 0;
        }
      },
      async loadSafeRuleCount() {
        const data = await querySafeRuleList({});
        if (data.success) {
          this.safe_rule_count = data.dataList.length;
        } else {
          this.safe_standard_count = 0;
        }
      },

      async loadSafeStandardCount() {
        const data = await querySafeStandList({});
        if (data.success) {
          this.safe_standard_count = data.dataList.length;
        } else {
          this.safe_standard_count = 0;
        }
      },

      async loadCarryEvent() {
        let scoreYear = sessionStorage.getItem('year')

        const res = await queryCarryEventList({scoreYear});
        let carrierEventList = res.dataList.map((item) => {
          return { title: item.reportName };
        });
        if (carrierEventList && carrierEventList.length > 3) {
          carrierEventList = carrierEventList.slice(0, 3);
        }
        this.carrierEventList = carrierEventList;
      },
      async loadTypedEvent() {
        let scoreYear = sessionStorage.getItem('year')
        const res = await queryTypedEventList({scoreYear});
        let typedEventList = res.dataList.map((item) => {
          return { title: item.reportName };
        });
        if (typedEventList && typedEventList.length > 3) {
          typedEventList = typedEventList.slice(0, 3);
        }
        this.typedEventList = typedEventList;
      },

      async loadOrgList() {
        const res = await queryHighCarryContacts({});
        if (res.data) {
          const dataList = res.data.dataList
            .filter((item) => item.level < 2)
            .map((item) => {
              return {
                id: item.contactName,
                title: item.role + '\n\r' + item.phone,
                name: item.contactName,
                column: item.level,
                offset: item.isAssit == 'Y' ? '70%' : '0%',
                // width: item.isAssit == 'Y' ? 250 : 0,
              };
            });
          console.log('dataList', dataList);
          this.orgchartOptions.series[0].data = res.data.titles.filter(
            (item) =>
              dataList.map((d) => d.id).indexOf(item[0]) >= 0 &&
              dataList.map((d) => d.id).indexOf(item[1]) >= 0
          );
          this.orgchartOptions.series[0].nodes = dataList;
        }
      },
      getCompLifeSum(stage, isNg) {
        if (isNg == 'Y') {
          const c1 = this.tableData.filter(
            (item) => item.lifeType == 'configCompLifeNew' && item.isNg == 'Y'
          ).length;
          const c2 = this.tableData.filter(
            (item) =>
              item.lifeType == 'configCompLifeDecoration' && item.isNg == 'Y'
          ).length;
          const c3 = this.tableData.filter(
            (item) => item.lifeType == 'configCompLifeExit' && item.isNg == 'Y'
          ).length;
          return [c1, c2, c3];
        } else {
          const c1 = this.tableData.filter(
            (item) => item.lifeType == 'configCompLifeNew' && item.stage == stage
          ).length;
          const c2 = this.tableData.filter(
            (item) =>
              item.lifeType == 'configCompLifeDecoration' && item.stage == stage
          ).length;
          const c3 = this.tableData.filter(
            (item) => item.lifeType == 'configCompLifeExit' && item.stage == stage
          ).length;
          return [c1, c2, c3];
        }
      },
      async loadCompLifeCharts() {
        const res = await queryCompLifeList({ carryName: this.user.carryName });
        if (res.dataList[0]) {
          this.tableData = res.dataList;
          compStatBarOption.series[0].data = this.getCompLifeSum(1, 'N');
          compStatBarOption.series[1].data = this.getCompLifeSum(2, 'N');
          compStatBarOption.series[2].data = this.getCompLifeSum(3, 'N');
          compStatBarOption.series[3].data = this.getCompLifeSum(4, 'N');
          compStatBarOption.series[4].data = this.getCompLifeSum(5, 'N');
          compStatBarOption.series[5].data = this.getCompLifeSum(6, 'N');
          compStatBarOption.series[6].data = this.getCompLifeSum(1, 'Y');

          this.companyStatCharts.setOption(compStatBarOption);
        }
      },
      menuClick(routerName) {
        this.$router.push({ name: routerName });
      },
      onZoneChanged(val) {
        this.zoneName = val;
        this.loadScoreBar();
      },
      getLastScore(carryScore) {
        if (!carryScore){
          carryScore = {}
        }
        if (carryScore.score12) {
          return carryScore.score12;
        } else if (carryScore.score11) {
          return carryScore.score11;
        } else if (carryScore.score10) {
          return carryScore.score10;
        } else if (carryScore.score9) {
          return carryScore.score9;
        } else if (carryScore.score8) {
          return carryScore.score8;
        } else if (carryScore.score7) {
          return carryScore.score7;
        } else if (carryScore.score6) {
          return carryScore.score6;
        } else if (carryScore.score5) {
          return carryScore.score5;
        } else if (carryScore.score4) {
          return carryScore.score4;
        } else if (carryScore.score3) {
          return carryScore.score3;
        } else if (carryScore.score2) {
          return carryScore.score2;
        } else if (carryScore.score1) {
          return carryScore.score1;
        }
        return 0;
      },
      async loadCarrScorePie() {
        let scoreYear = sessionStorage.getItem('year')
        const data = await queryCarryScoreList({scoreYear});

        if (data.dataList[0]) {
          const homeScore = data.dataList.filter(
            (item) => item.scoreType == '资产方'
          )[0];
          const lastScore1 = this.getLastScore(homeScore);
          carrierScoreOption1.series[0].data[0].value = lastScore1;
          this.carrierScoreCharts1.setOption(carrierScoreOption1);

          const carryScore = data.dataList.filter(
            (item) => item.scoreType == '载体得分'
          )[0];
          const lastScore2 = this.getLastScore(carryScore);
          carrierScoreOption2.series[0].data[0].value = lastScore2;
          this.carrierScoreCharts2.setOption(carrierScoreOption2);

          const compScore = data.dataList.filter(
            (item) => item.scoreType == '企业平均分'
          )[0];
          const lastScore3 = this.getLastScore(compScore);
          carrierScoreOption3.series[0].data[0].value = lastScore3;
          this.carrierScoreCharts3.setOption(carrierScoreOption3);
        }else{
          carrierScoreOption1.series[0].data[0].value = 0;
          this.carrierScoreCharts1.setOption(carrierScoreOption1);
          carrierScoreOption2.series[0].data[0].value = 0;
          this.carrierScoreCharts2.setOption(carrierScoreOption2);
          carrierScoreOption3.series[0].data[0].value = 0;
          this.carrierScoreCharts3.setOption(carrierScoreOption3);
        }
      },

      async loadSafeEventCharts() {
        let scoreYear = sessionStorage.getItem('year')

        const res = await queryLetSignList({scoreYear});
        if (res.dataList) {
          const tableData = res.dataList;
          let count1 = tableData.filter(
            (item) => parseFloat(item.signRate) == 100
          ).length;
          let count2 = tableData.filter(
            (item) =>
              parseFloat(item.signRate) >= 90 && parseFloat(item.signRate) < 100
          ).length;
          let count3 = tableData.filter(
            (item) =>
              parseFloat(item.signRate) >= 80 && parseFloat(item.signRate) < 90
          ).length;
          let count4 = tableData.filter(
            (item) =>
              parseFloat(item.signRate) >= 70 && parseFloat(item.signRate) < 80
          ).length;
          let count5 = tableData.filter(
            (item) =>
              parseFloat(item.signRate) >= 60 && parseFloat(item.signRate) < 70
          ).length;
          let count6 = tableData.filter(
            (item) => parseFloat(item.signRate) < 60
          ).length;
          let countList = [count1, count2, count3, count4, count5, count6];
          eventPieOption.series[0].data.forEach((item, index) => {
            item.value = countList[index];
          });

          eventPieOption.title[0].text =
            '{name|安全责任书签署}\n{val|' +
            tableData
              .map((item) => (item.signNum ? parseInt(item.signNum) : 0))
              .reduce((o1, o2) => o1 + o2, 0) +
            '}{c|}';

          console.log(
            'eventPieOption.title[0].text',
            eventPieOption.title[0].text
          );
        }

        console.log('eventPieOption:', eventPieOption);
        this.eventPieCharts.setOption(eventPieOption);
      },


      async loadScoreBar() {
        let scoreYear = sessionStorage.getItem('year')
        const res = await queryCompScoreList({
          scoreYear,
          page_no: 0,
          page_size: 100,
        });
        if (res.dataList) {
          let scoreData = res.dataList;
          let currScoreData = scoreData.filter(
            (item) => this.zoneName.indexOf(item.zoneNo) >= 0
          );
          console.log('this.zoneName',this.zoneName);

          console.log('currScoreData', currScoreData);
          const barXAxisData = currScoreData.map((item) => item.companyShort);
          barOption2.xAxis.data = barXAxisData;
          let barYAxisData = currScoreData.map((item) => this.getLastCompScore(item));
          console.log('barYAxisData',barYAxisData);
          barYAxisData = barYAxisData ? barYAxisData : 0;
          barOption2.series[0].data = barYAxisData;
          this.myChart1.setOption(barOption2);
        }else{
          barOption2.series[0].data = 0;
          this.myChart1.setOption(barOption2);
        }
    },

     getLastCompScore(compScore){
      return compScore.score12 || compScore.score11|| compScore.score10 || compScore.score9 || compScore.score8 || compScore.score7 || compScore.score6
      || compScore.score5 || compScore.score4 || compScore.score3|| compScore.score2 || compScore.score1

     },

    async loadCarrLineCharts() {
      let scoreYear = sessionStorage.getItem('year')
      const res = await queryCarryScoreList({
        scoreYear,
        carriesName: this.user.carrName,
      });
      if (res.dataList) {
        const carryData = res.dataList.filter(
          (item) => item.scoreType == '载体得分'
        );
        if (carryData[0]) {
          console.log('carryData[0]', carryData[0]);
          barOption3.series[0].data = [
            carryData[0].score1,
            carryData[0].score2,
            carryData[0].score3,
            carryData[0].score4,
            carryData[0].score5,
            carryData[0].score6,
            carryData[0].score7,
            carryData[0].score8,
            carryData[0].score9,
            carryData[0].score10,
            carryData[0].score11,
            carryData[0].score12,
          ];
          this.myChart.setOption(barOption3);
        }else{
          barOption3.series[0].data = []
          this.myChart.setOption(barOption3);

        }
      }
    },
  },
};
</script>
<style scoped>
  ::v-deep .el-select .el-input__inner {
    background-color: transparent;
    color: white;
  }

  ::v-deep .el-select__tags .el-tag {
    background-color: transparent;
    color: white;
  }

  .menu_group_wrapper {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .menu_group_wrapper_1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .menu_row {
    width: 100%;
  }

  .menu_col {
    margin-top: 5px;
    height: calc(50% - 5px);
  }

  .boder-title {
    height: 30px;
    /* color: #40c5f1; */
    color: white;
    line-height: 30px;
    text-align: start;
    font-weight: bold;
    font-size: 20px;
    margin-left: 10%;
    margin-top: 3%;
    transform: translateY(0%);
    cursor: pointer;
  }

  .menu_group_layout {
    background: url('~assets/bg_menu_group.png') no-repeat;
    background-size: 100% 100%;
  }

  .home_score_square {
    background: url('~assets/bg_home_score_square.png') no-repeat;
    background-size: 100% 100%;
    height: 80px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .home_score_square_name {
    color: white;
    font-size: 18px;
  }

  .home_score_square_score {
    color: white;
    font-size: 20px;
  }

  .sum_event_title {
    color: white;
    font-size: 16px;
    font-family: '微软雅黑';
    font-weight: bold;
    text-align: start;
    margin-left: 60px;
  }

  .home_event_item {
    color: #06ddff;
    cursor: pointer;
    font-size: 14px;
    text-align: start;
    margin-left: 85px;
    margin-top: 7px;
    text-decoration: underline;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  }

  .know_item_wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
  }

  .know_item_name {
    flex: 1;
    text-align: start;
    color: white;
  }

  .know_item_count {
    background: url('~assets/bg_safe_know_count.png') no-repeat;
    background-size: 100% 100%;
    height: 35px;
    width: 35px;
    color: white;
    font-size: 13px;
    line-height: 35px;
  }

  .score_point_title {
    color: #37a2da;
    font-weight: bold;
    height: 20px;
    position: absolute;
    font-family: '微软雅黑';
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
  }
</style>